<template>
  <view
    class="nav-container"
    :style="{
      paddingTop: statusBarHeight,
    }"
  >
    <view class="uni-row-flex top-nav-box">
      <view class="top-nav-back-box">
        <view class="nav-back-icon">
          <view class="align_center">
            <uni-icons
              @click="topBack"
              color="black"
              type="left"
              size="26"
            ></uni-icons>
          </view>
        </view>
        <view class="text-left uni-row-flex align_center" @tap="toEdit">
          <view class="pic-img">
            <img
              class="icon"
              :src="useAgentStore.agentInfo.avatarUrl || ''"
              alt=""
            />
          </view>
          <view class="flex1 nickname-info">
            <view class="nickname-info-agent-name">{{
              useAgentStore.agentInfo.nickname
            }}</view>
            <view class="nickname-info-user-name"
              >@{{ useAgentStore.agentInfo.createrUser }}</view
            >
          </view>
        </view>
      </view>
      <view class="text-right">
        <view class="voice-img" @click="onVoiceChat">
          <uni-icons color="black" type="phone" size="28"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
let statusBarHeight = ref(0);
let options = ref({});
let headerTop = ref(null);
let isKeyboardVisible = ref(false);
import useAgent from "@/store/useAgent.js";
const useAgentStore = useAgent();
onLoad((option) => {
  options.value = option;

  uni.getSystemInfo({
    success: function (res) {
      statusBarHeight.value = res.statusBarHeight + "px";
    },
  });

  // 监听键盘弹出事件
  uni.onKeyboardHeightChange((res) => {
    if (res.height > 0) {
      headerTop.value = res.height;
      isKeyboardVisible.value = true;
    } else {
      headerTop.value = 0;
      isKeyboardVisible.value = false;
    }
  });
});
const onVoiceChat = () => {
  // closeWs(function () {
  //   console.log("关闭了");
  uni.navigateTo({
    url: "/pages/index/voiceChat",
  });
  // });
};
const toEdit = () => {
  uni.navigateTo({
    url: "/pages/index/editAgent?agentId=" + options.value.agentId,
  });
};
const topBack = () => {
  console.log(123);
  // 回退到上一页
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.align_center {
  display: flex;
  align-content: center;
}
// 顶部
.nav-container {
  background: #fff;
  height: 80rpx;
  .top-nav-box {
    justify-content: space-between;
    .top-nav-back-box {
      align-items: center;
      display: flex;
      justify-content: flex-start;
    }
    .text-right {
      padding-right: 240rpx;
      margin-top: 4rpx;
    }
  }

  .uni-row-flex {
    height: 100%;
    display: flex;
    align-content: center;
    align-items: center;
  }
  .nav-back-icon {
    padding-left: 5rpx;
  }
  .text-left {
    margin-left: 10rpx;
  }
  .top-title {
    display: flex;
    position: relative;

    .back-home {
      position: absolute;
      top: 6rpx;
      left: 16rpx;
    }

    .input {
      margin-left: 10rpx;
      text-align: left;
      border: none;
      outline: none;
      font-size: 26upx;
      padding-left: 10rpx;
      color: #999999;
      width: 324rpx;
      height: 72rpx;
      line-height: 72upx;
      background: #ffffff;
      border-radius: 88rpx;
    }

    .icons {
      margin-top: 10rpx;
      width: 100rpx;
      display: flex;

      view {
        width: 64rpx;
        margin-left: 10rpx;
      }

      image {
        width: 64rpx;
      }
    }
  }
}

.flex1 {
  flex: 1;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.pic-img image {
  height: 60rpx;
  width: 60rpx;
  border-radius: 50%;
}

.nickname-info {
  font-size: 12px;
  padding-left: 6px;
}

.nickname-info-agent-name {
  font-size: 14px;
  font-weight: bold;
}

.nickname-info-user-name {
  color: #999;
}

.uni-row-flex {
  display: flex;
  height: 60rpx;
}
</style>
